<!-- 单文件组件中的template script style三个的顺序位置是可以改变的，谁先无所谓-->
<!-- ctrl+j 唤出控制台-->
<template>
  <!-- cell 棋盘格 -->
  <div class="wrapper">
    <div>第{{n_hands}}手</div>
    <!-- 用于居中棋盘 -->
    <div class="chess">
      <div class="row">
        <!--
        v-on:click="onClickSelf(5)" 像这样带有参数的函数，
        会等到click之后，再调用这个onClickSelf(5)函数，
        js代码中，一般来说，函数后面又(),那就会直接调用这个函数，
        但是vue做了处理，相当于：@click="()=>onClickSelf(5)",
        这样就不会立即执行函数了，而是等待click之后执行
        -->
        <!-- onClickSelf(0,$event) $event就是从组件Cell中传递过来的组件属性值 -->
        <Cell
          @gettext="onClickSelf(0,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(1,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(2,$event)"
          :n="n_hands"
        />
      </div>
      <div class="row">
        <Cell
          @gettext="onClickSelf(3,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(4,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(5,$event)"
          :n="n_hands"
        />
      </div>
      <div class="row">
        <Cell
          @gettext="onClickSelf(6,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(7,$event)"
          :n="n_hands"
        />
        <Cell
          @gettext="onClickSelf(8,$event)"
          :n="n_hands"
        />
      </div>
    </div>
    <!-- <div>{{map}}</div> -->
    <div>{{winner===null?'胜负未分':`胜方为：${winner}`}}</div>
  </div>
</template>

<!--想要快速生成script且包含export default 就要<script>然后才会有语法提示，要写上<>才行-->
<script>
// 引入Cell.vue组件  这个.vue可以不写的
import Cell from './components/Cell.vue'

export default {
  // 声明组件名字
  components: { Cell },
  data () {
    return {
      n_hands: 0,
      // 通过map数组进行胜负的判定
      map: [[null, null, null], [null, null, null], [null, null, null]],
      winner: ''
    }
  },
  methods: {

    // 这个的 text就是通过函数的$event传递过来的形参
    onClickSelf (i, text) {
      console.log(`${i + 1}号棋盘格被点击，内容是：${text}`)
      this.n_hands = this.n_hands + 1
      /*
      通过这个map，记录点击的棋盘格的X O
      [00 01 02]   00--> 0/3=0 0%3=0   01-->0/3=0 1%3=1
      [10 11 12]
      [20 21 22]
      所以通过函数传入的i进行map数组的定位，从而将text填入对应的map数组位置中
      [null, null, null]
      [null, null, null]
      [null, null, null]
      */
      //  向页面上的棋盘加上X、O
      // ?因为i/3必定会是小数，所以用Math.floor向下取整
      this.map[Math.floor(i / 3)][i % 3] = text

      // !每次点击棋盘，都进行胜负的判断函数执行，检测是否胜利
      this.tell()
    },
    // 判断函数，用于检测游戏是否结束
    tell () {
      // 判断横着的胜利请开给你
      for (let i = 0; i < 2; i++) {
        // 也可以在tell（）函数开始的时候声明一个const map=this.map,这样就不用每个map前加上this.了
        // if (map[i][0] === map[i][1] && [i][1] === map[i][2]) {
        // !特殊情况，三个都为null，那也会判定胜利，所以设定不能为空
        if (this.map[i][0] !== null &&
            this.map[i][0] === this.map[i][1] &&
            this.map[i][1] === this.map[i][2]
        ) {
          this.winner = this.map[i][0]
        }
      }
      // 判断竖着的胜利情况
      for (let j = 0; j < 2; j++) {
        if (this.map[0][j] !== null &&
            this.map[0][j] === this.map[1][j] &&
            this.map[1][j] === this.map[2][j]
        ) {
          this.winner = this.map[0][j]
        }
      }
      // 判断对角线的胜利情况，只有两种情况
      if (this.map[0][0] !== null &&
          this.map[0][0] === this.map[1][1] &&
          this.map[1][1] === this.map[2][2]
      ) {
        this.winner = this.map[0][0]
      }
      if (this.map[0][2] !== null &&
          this.map[0][2] === this.map[1][1] &&
          this.map[1][1] === this.map[2][0]
      ) {
        this.winner = this.map[0][2]
      }
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
    /* align-items: center;
     align-content: center;
     两者不一样，item会压缩到最小宽度，而content则是占满100%宽度
  */
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.row{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
